<script setup>
    import { ref, reactive, toRaw } from 'vue'
    import { service, cache } from '@utils'
    import { ElMessage } from 'element-plus'

    const emit = defineEmits(['refresh'])

    const visible = ref(false)
    const formRef = ref()
    const totalOverduePrice = ref()
    const leaseMethod = ref()
    const overPrice = ref()
    const overDuePrice = ref()
    const buyOutPrice = ref()
    const outOfRent = ref()
    const priceOfSplit =ref()
    const state = reactive({
        param: {}
    })

    const rules = {
        amount: [{ required: true, message: '请输入', trigger: 'blur' }]
    }

    const open = (item) => {
        state.param.orderId = item.orderId;
        totalOverduePrice.value = item.totalOverduePrice;
        overDuePrice.value = item.overDuePrice;
        buyOutPrice.value = item.buyOutPrice;
        outOfRent.value = item.outOfRent
        leaseMethod.value = item.leaseMethod;
        overPrice.value = item.overPrice;
        priceOfSplit.value = item.priceOfSplit
        visible.value = true;
    }

    const close = () => {
        visible.value = false
        state.param = {}
    }

    const sure = async () => {
        formRef.value.validate((valid) => {
            if (valid) {
                realSubmit()
            }
        })
    }
    const realSubmit = async () => {
        const res = await service.bfqz.getDeduct(toRaw(state.param))
        if (res.resultCode == 8200) {
            ElMessage.success('申请扣除押金成功')
            close()
            setTimeout(() => {
                emit('refresh')
            }, 2000);
            
        }else{
            // ElMessage.warning(res.message)
        }
    }
    //把方法暴露给父组件
    defineExpose({
        open
    })
</script>

<template>
    <el-dialog
        v-model="visible"
        title="申请扣除押金"
        center
        :close-on-click-modal="false"
        @close="close"
        destroy-on-close
        :width="450"
    >
        <section>
            <el-form
                :model="state.param"
                :rules="rules"
                ref="formRef"
                label-width="120px"
                label-suffix=":"
                onsubmit="return false;"
            >
            <el-row>
                <el-col :span="12">
                    <el-form-item label="逾期金额">¥{{ totalOverduePrice }}</el-form-item>
                </el-col>
                <el-col :span="12" v-if="outOfRent">
                    <el-form-item label="买断金额">¥{{ buyOutPrice }}</el-form-item>
                </el-col>
            </el-row>
                
                <el-form-item label="申请扣除金额" prop="amount">
                    <el-input-number
                        v-model="state.param.amount"
                        :precision="2"
                        :controls="false"
                        placeholder="请输入申请扣除金额"
                        style="width: 100%;"
                        :min="0"
                        :max="outOfRent ? totalOverduePrice + buyOutPrice : totalOverduePrice"
                        clearable
                    />
                </el-form-item>
                <p style="margin-left: 22px; font-size: 12px" v-if="state.param.amount">
                    <span v-if="overPrice">
                        其中{{
                            state.param.amount >= overPrice
                                ? overPrice
                                : state.param.amount
                        }}元转支付租金,
                    </span>
                    <span v-if="(state.param.amount > overPrice) && outOfRent">
                        {{
                            // (state.param.amount - overPrice).toFixed(2)
                            state.param.amount - overPrice >= buyOutPrice
                                ? buyOutPrice
                                : (state.param.amount - overPrice).toFixed(2)
                        }}元转买断金,
                    </span>
                    <span v-if="state.param.amount > overPrice + (outOfRent ? buyOutPrice : 0)">
                        {{
                            state.param.amount - (overPrice + (outOfRent ? buyOutPrice : 0)) >= overDuePrice
                                ? overDuePrice
                                : (state.param.amount - (overPrice + (outOfRent ? buyOutPrice : 0))).toFixed(2)
                        }}元转支付滞纳金
                    </span>
                    
                </p>
            </el-form>
        </section>

        <template #footer>
            <span class="flex-align-end">
                <div class="margin-right20">
                    <el-button @click="close">取消</el-button>
                </div>
                <el-button type="primary" @click="sure">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<style scoped lang="scss">
:deep(.el-input-number .el-input__inner){
    text-align: left !important;
}
</style>
